<template>
 <div style="width: 100%;min-height: 100vh;">
    <div style="width: 100%;max-width: 1940px;margin: 0 auto;overflow: hidden;position: relative;padding-bottom: 40px;">
      <p style="font-size: 24px;position: absolute;z-index: 1200;left: 75px;top: 50px;color: white;text-shadow: 0 4px 10px rgba(0,0,0,0.3);">志愿助手主页</p>
      <div v-if="data.banner.data==undefined" style="width: 100%;height: 480px">

      </div>
      <Banner v-if="data.banner.data!=undefined" :app-data="appData" :banners="data.banner.data"
      ></Banner>
      <div style="width: 100%;">
        <div style="width: calc(100% - 20px);padding: 0 40px;margin-top: 40px;display: inline-block;padding-right: 0;"
        >
            <div style="width: 100%;"
            
            >
              <div class="link-button-like-title">
                网站导航
              </div>
              <div style="margin-top: 20px;width: calc(100%);"
                :style="{
                  paddingRight:'0px'
                }"
              >


                <div v-for="item in data.navigationLinks" style="display: inline-block;width: 33.3%;margin-bottom: 20px;"
                 :style="{
                  width:getNavCardWidth(),
                  display:(getNavCardWidth()=='20%' && item.index==0)?'none !important':'inline-block'
                 }"
                  @click="()=>{
                    if(item.index==0){
                      goToNews()
                      return
                    }
                    openLink(item.index)
                  }"
                >
                  <div class="navigationCardWrapper" style="width: calc(100% - 20px);box-shadow: 0 1px 3px rgba(0,0,0,0.2);border-radius: 10px;height: 200px;background-position: center;background-repeat: no-repeat;background-repeat: no-repeat;background-size: cover;position: relative;overflow: hidden;"
                    :style="{
                      backgroundImage: 'url(' + appData.serverURL + '/download/' + item.background + ')'
                    }"
                  >
                    <div class="navigationCard" style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.2);position: relative;color: white;">
                      <p class="navigationTitle" style="font-size: 22px;">{{ item.title }}</p>
                      <p class="navigationSubTitle" style="font-size: 14px;">{{ item.subTitle }}</p>
                    </div>
                  </div>
                </div>



              </div>
            </div>
        </div>
<!--        <div style="width: 100%;padding: 0 40px;margin-top: 40px;display: inline-block;padding-left: 0px;"-->
<!--          :style="{-->
<!--            width:getAIAidWidth(),-->
<!--            paddingLeft:getAIAidWidth()=='100%'?'40px':(getAIAidWidth()=='40%'?'5px':'0'),-->
<!--            float:getAIAidWidth()=='100%'?'unset':'right'-->
<!--          }"-->
<!--        >-->
<!--            <div style="width: 100%;">-->
<!--              <div class="link-button-like-title">-->
<!--                志愿智能填报-->
<!--              </div>-->
<!--              <div style="margin-top: 20px;width: calc(100% + 20px);height: 100%;position: relative;">-->
<!--                <div style="width: calc(100% - 20px);box-shadow: 0 1px 3px rgba(0,0,0,0.2);border-radius: 10px;height: 200px;background-position: center;background-repeat: no-repeat;background-repeat: no-repeat;background-size: cover;position: relative;overflow: hidden;height: 420px;">-->
<!--                    <vip></vip>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--        </div>-->
      </div>
      <div id="zx" style="width: 100%;padding: 0 40px;margin-top: 40px;">
          <div v-if="homeData.news.data!=undefined" style="width: 100%;">
            <div class="link-button" @click="openLinku(homeData.news.data.gkzxw.baseURL)">
              高考资讯网 >
            </div>
            <gridView :base-u-r-l="homeData.news.data.gkzxw.baseURL" :app-data="appData" :items="homeData.news.data.gkzxw.links" style="margin-top: 20px;"></gridView>
          </div>
      </div>
      <div v-if="homeData.news.data2!=undefined && homeData.news.data!=undefined" style="width: 100%;padding: 0 40px;margin-top: 40px;">
          <div v-if="homeData.news.data2!=undefined" style="width: 100%;">
            <p style="font-size: 12px;color: var(--color-neutral-6);margin-bottom: 5px">为你推荐</p>
            <div class="link-button" @click="openLinku(homeData.news.data2.gkzxw.baseURL)">
              {{ homeData.loginedUserInfo.province }}高考资讯 >
            </div>
            <gridView :base-u-r-l="homeData.news.data.gkzxw.baseURL" :app-data="appData" :items="homeData.news.data2.gkzxw.links" style="margin-top: 20px;"></gridView>
          </div>
      </div>
    </div>
 </div>
</template>

<script>
import Banner from '@/components/banner.vue';
import tool from '@/utlis/tool';
import axios from 'axios';
import gridView from '@/components/gridView.vue';
import vip from '@/components/vip.vue';

export default{
    data() {
        return {
          data:{
            banner:{
              data:undefined
            },
            navigationLinks:[
              {
                background:'file-1706683244124-326911497.jpg',
                title:'资讯',
                subTitle:'掌握新高考动态，洞悉政策变化',
                link:'/',
                index:0
              },
              {
                background:'file-1706683234598-13012367.jpg',
                title:'查找',
                subTitle:'快速检索院校专业，定位理想目标',
                link:'/search',
                index:1
              },
              {
                background:'file-1706683237463-918730694.jpg',
                title:'志愿智能填报',
                subTitle:'智能推荐志愿方案，科学决策无忧',
                link:'/fillApplication',
                index:2
              },
              {
                background:'file-1706683239708-953406251.jpg',
                title:'问答区',
                subTitle:'解答疑惑，分享经验，互助共进',
                link:'/qaArea',
                index:3
              },
              {
                background:'file-1706683241927-770653814.jpg',
                title:'专业咨询',
                subTitle:'专家一对一指导，解答专业选择难题',
                link:'/consult',
                index:4
              },
              {
                background:'file-1706683246162-538150378.jpg',
                title:'用户中心',
                subTitle:'个性化设置，便捷管理个人信息',
                link:'/user',
                index:5
              },
            ]
          }
        };
    },
    async mounted() {
      this.getAllBanners()

    },
    methods: {
      getNavCardWidth(){
        if(this.appData.pageSize.width<=660){
          return '100%'
        }
        if(this.appData.pageSize.width<=1030){
          return '50%'
        }
        if(this.appData.pageSize.width<=1730){
          return '33.3%'
        }
        return '20%'
      },
      openLink(index){
        this.changePage(index)
      },
      getAIAidWidth(){
        if(this.appData.pageSize.width>1850){
          return "40%"
        }
        if(this.appData.pageSize.width>975){
          return "25%"
        }
        if(this.appData.pageSize.width>660){
          return "100%"
        }
        return "100%"
      },
      getNavigationWidth(){
        if(this.appData.pageSize.width>1850){
          return "60%"
        }
        if(this.appData.pageSize.width>975){
          return "75%"
        }
        if(this.appData.pageSize.width>660){
          return "100%"
        }
        return "100%"
      },
      openLinku(url){
        window.open(url,'_blank')
      },
      async getAllBanners(){
        let banners = JSON.parse((await this.getSettingFromBackend('banner')).results.value)
        if(banners.length!=1){
          let temp = []
          temp.push(JSON.parse(JSON.stringify(banners[banners.length-2])))
          temp.push(JSON.parse(JSON.stringify(banners[banners.length-1])))
          for(let i = 0;i<banners.length-2;i++){
            temp.push(JSON.parse(JSON.stringify(banners[i])))
          }
          banners = temp
        }
        let defaultLength = banners.length
        let c = 0
        while(banners.length<14){
          banners.push(JSON.parse(JSON.stringify(banners[c])))
          c+=1
          if(c==defaultLength){
            c = 0
          }
        }
        for(let i=0;i<banners.length;i++){
          banners[i].index = i
        }
        this.data.banner.data = banners
      },
      getSettingFromBackend(keyName){
        return new Promise(async (resolve, reject) => {
          return resolve(await this.axiosPost('/setting/get',{
            keyName:keyName
          }))
        })
      },
      axiosGet(url,data){
      return new Promise((resolve, reject) => {
        data = tool.encodeString(JSON.stringify(data));
        console.log(this.appData.serverURL + url)
        var config = {
           method: 'get',
           url: this.appData.serverURL + url,
           data : data,
           headers: { 
              'Accept': '*/*', 
           },
        };
        axios(config).then((res) => {
          return resolve(JSON.parse(tool.decodeString(res.data)))
        })
      })
      },
      axiosPost(url,data){
      return new Promise((resolve, reject) => {
        data = tool.encodeString(JSON.stringify(data));
        var config = {
           method: 'post',
           url: this.appData.serverURL + url,
           data : data,
           headers: { 
              'Accept': '*/*', 
           },
        };
        axios(config).then((res) => {
          return resolve(JSON.parse(tool.decodeString(res.data)))
        })
      })
      },
    },
    props: {
        appData: undefined,
        homeData: undefined,
        changePage: undefined,
        goToNews: undefined
    },
    components: { Banner, gridView, vip }
}
</script>

<style scoped>

.navigationSubTitle{
  position: absolute;
  left: 30px;
  bottom: 25px;
  transition: all .15s;
  opacity: 0;
}

.navigationTitle{
  position: absolute;
  left: 30px;
  bottom: 40px;
  transition: bottom .15s;
}

.navigationCardWrapper:hover .navigationCard{
  backdrop-filter: blur(20px);
}

.navigationCardWrapper:active .navigationCard{
  backdrop-filter: blur(0px);
}

.navigationCardWrapper{
  transition: top .15s;
  top: 0;
  position: relative;
}

.navigationCardWrapper:hover{
  top: -2px;
}

.navigationCardWrapper:active{
  top: 0px;
}

.navigationCard{
  transition-property: backdrop-filter,top ;
  transition-duration: .2s;
  border-radius: 10px;
  position: relative;
}

.navigationCard:hover{
  
}

.navigationCard:hover .navigationTitle{
  bottom: 60px;
}

.navigationCard:hover .navigationSubTitle{
  bottom: 30px;
  opacity: 0.8;
}

.navigationCard:active .navigationTitle{
  bottom: 40px;
}

.navigationCard:active .navigationSubTitle{
  bottom: 25px;
  opacity: 0;
}

.link-button-like-title{
  padding: 5px 30px 5px 0;
  font-size: 20px;
  transition: all .2s;
  color: var(--color-neutral-10);
  border-radius: 5px;
  display: inline-block;
}

.link-button{
  padding: 5px 30px 5px 0;
  font-size: 20px;
  transition: all .2s;
  color: var(--color-neutral-10);
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
}

.link-button:hover{
  padding: 5px 15px;
  color: rgb(0,120,215);
  background-color: rgba(128,128,128,0.1);
}

.link-button:active{
  color: rgb(87, 161, 223);
  background-color: rgba(128,128,128,0.05);
}

</style>